<template>
  <el-menu :default-active="currentPath" :mode="isRoot?'horizontal':'vertical'" class="el-menu-demo" router>
    <template v-for="item in menuTree" :key="item.id">
      <!-- 无子菜单的项 -->
      <el-menu-item
          v-if="!item.children?.length"
          :index="item.url"
      >
        <el-icon v-if="item.icon"><component :is="item.icon" /></el-icon>
        <span>{{ item.name }}</span>
      </el-menu-item>
      <!-- 有子菜单的项 -->
      <el-sub-menu v-else :index="item.id.toString()" class="">
        <template #title>
          <el-icon v-if="item.icon"><component :is="item.icon" /></el-icon>
          <span>{{ item.name }}</span>
        </template>
        <!-- 递归渲染子菜单 -->
        <MenuItem :menu-tree="item.children" :is-root="false"/>
      </el-sub-menu>
    </template>
  </el-menu>
</template>

<script setup>
import {computed, defineProps} from 'vue';
import {useRoute} from "vue-router";
defineProps({
  isRoot: Boolean,
  menuTree: Array
});
const route = useRoute();
const currentPath = computed(() => {
  return route.path;
});
</script>

<style scoped>
.el-menu-demo {
  background-color: transparent;
  border-bottom: none;
}

.el-menu > .el-menu-item {
  height: 60px;
  line-height: 60px;
  color: #333;
}

.el-menu > .el-menu-item.is-active {
  color: #a0d911;
  border-bottom: 2px solid #a0d911;
}


</style>